<template>
	<view class="template-classify">
	
	<tn-nav-bar fixed :bottomShadow="false">商品</tn-nav-bar>	
		<view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<!-- 搜索框 -->
			<view 
				class="tn-classify__search--wrap tn-flex tn-flex-col-center tn-flex-row-center tn-border-solids-bottom">
				<view class="justify-content-item align-content-item">
					<view class="tn-bg-gray--light tn-flex tn-flex-col-center"
						style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
						<text
							class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
						<input class="justify-content-item" placeholder="输入商品关键词" v-model="keyword"
							placeholder-style="color:#AAAAAA"></input>
					</view>
				</view>
				<view class="justify-content-item tn-text-center">
					<tn-button :shadow="true" @click="sousuo()" backgroundColor="tn-main-gradient-blue--reverse"
						shape="round" padding="20rpx 20rpx" width="150rpx" shadow fontBold>
						<text>搜索</text>
					</tn-button>
				</view>
				<view class="justify-content-item tn-text-center">

					<tn-button :shadow="true" @click="add()" backgroundColor="tn-main-gradient-blue--reverse"
						shape="round" padding="20rpx 20rpx" width="180rpx" shadow fontBold>
						<text>添加产品</text>
					</tn-button>
				</view>
				<view class="justify-content-item tn-text-center">
				
					<tn-button :shadow="true" @click="fenleishow=true" backgroundColor="tn-main-gradient-blue--reverse"
						shape="round" padding="20rpx 20rpx" width="180rpx" shadow fontBold>
						<text>管理分类</text>
					</tn-button>
				</view>
				
			</view>

			<!-- 分类列表和内容 -->
			<view class="tn-classify__container tn-bg-gray--light">
				<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
					<!-- 左边容器 -->
					<scroll-view class="tn-classify__left-box tn-flex-basic-sm" :scroll-top="leftScrollViewTop" scroll-y
						scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
					
						<view v-for="(item, index) in tabbar" :key="index" :id="`tabbar_item_${index}`"
							class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
							:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
							<view class="tn-classify__tabbar__item__title">{{ item.title }}</view>
						</view>

					</scroll-view>

					<!-- 右边容器 -->
					<scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop"
						:style="{height: scrollViewHeight + 'px'}">
						<block>
							<view class="tn-classify__content">


								<!-- 分类内容子栏目 -->
								<view class="tn-classify__content__sub-classify">
									
									<view v-for="(item,index) in list" :key="index"
										class="order__item tn-border-solid tn-shadow">


										<view
											class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap ">
											<view class="order__item__content__image">
												<image :src="item.images" mode="scaleToFill"></image>
											</view>
											<view class="">
												<view class="tn-text-bold">{{item.goods_name}}</view>
												<view class="tn-margin-top-sm text-red">￥{{item.price}}</view>
												<view class=" ">库存{{item.kucun}} /销量：{{ item.buy_no }}</view>
											</view>
										</view>

										<view
											class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
											<view class="order__item__operaation__left">
												<tn-button shape="round" backgroundColor="tn-main-gradient-cyan"
													:fontSize="24" height="auto" padding="10rpx 18rpx"
													@click="pull(item.id,index)" v-if="item.status == 1">已上架</tn-button>
												<tn-button shape="round" backgroundColor="tn-main-gradient-red--light"
													:fontSize="24" height="auto" padding="10rpx 18rpx"
													@click="push(item.id,index)" v-if="item.status == 0">已下架</tn-button>
											</view>
											<view
												class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
												<view class="order__item__operaation__right__button">
													<tn-button :plain="true" shape="round" fontColor="#080808"
														@click="jump_edit(item.id)" backgroundColor="#080808"
														:fontSize="24" height="auto"
														padding="10rpx 18rpx">修改</tn-button>
												</view>

												<view class="order__item__operation__right__button">
													<tn-button :plain="true" shape="round" fontColor="tn-color-red"
														@click="delgoods(item.id,index)" backgroundColor="tn-bg-red"
														:fontSize="24" height="auto"
														padding="10rpx 18rpx">删除</tn-button>
												</view>
											</view>
										</view>
									</view>
									<view class="tn-padding-bottom"></view>

								</view>
							</view>

							<view class="tn-padding-bottom"></view>
						</block>
					</scroll-view>
				</view>
			</view>
			
			
		</view>
		
		
		
		
		
		<tn-popup v-model="fenleishow" width="80%" height="80%" mode="bottom" :borderRadius="30" :closeBtn="true"
			:maskCloseable="true" >
		
			<tn-modal width="80%" v-model="sonxiushow" backgroundColor="#E4E9EC" padding="30rpx 20rpx" :radius="25"
				title="修改" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">
				<view class="custom-modal-content tn-padding-sm ">
					<view class="justify-content-item align-content-item">
						<view class="tn-bg-gray--light tn-flex tn-flex-col-center"
							style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
							<text class=" justify-content-item tn-padding-right-xs tn-color-gray "
								style="width: 50px;">名称：</text>
							<input class="justify-content-item" placeholder="分类名称" v-model="sonitem_title"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class="justify-content-item align-content-item " style="margin-top: 20px;">
						<view class="tn-bg-gray--light tn-flex tn-flex-col-center"
							style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
							<text class=" justify-content-item tn-padding-right-xs tn-color-gray "
								style="width: 50px;">排序：</text>
							<input class="justify-content-item" placeholder="" v-model="sonitem.sort"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class="tn-text-center tn-padding-top" @click="xiugaison()">
						<tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="tn-cool-bg-color-7"
							fontColor="tn-color-white">确认</tn-button>
					</view>
		
				</view>
			</tn-modal>
		
		<view class="tn-search-fixed tn-padding-top">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
					<view class="justify-content-item align-content-item">
						<view class="tn-bg-gray--light tn-flex tn-flex-col-center"
							style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
							<text
								class="tn-icon-add justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
							<input class="justify-content-item" placeholder="分类名称" v-model="catename"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
		
					<view class="align-content-item">
						<view class="justify-content-item tn-text-center" @click="addcate()">
							<tn-button fontColor="#000000" :shadow="true"
								backgroundColor="tn-main-gradient-yellow--reverse" shape="round" padding="20rpx 20rpx"
								width="150rpx" shadow fontBold>
								<text>添加</text>
							</tn-button>
		
						</view>
					</view>
				</view>
			</view>
		
		
			<scroll-view class="tn-classify__left-box tn-flex-basic-sm" scroll-y scroll-with-animation
				style="height:100%;">
				<view class="tn-flex tn-flex-row-center tn-margin-top-sm" v-if="cate_son.length<1">
					<view class="">
						<tn-empty icon="/static/images/no.png" text="没有类别">
		
						</tn-empty>
					</view>
				</view>
				<view class="about-shadow  tn-margin">
					<tn-list-cell :unlined="true" :radius="true" :fontSize="30" v-for="(item, indexdsdf) in cate_son"
						:key="indexdsdf">
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">
								{{ item.title }}
							</view>
							<view style="font-size: 14px;">
								<text class="tn-margin-right">
									排序:{{ item.sort }}
								</text>
		
								<tn-button fontColor="#ffffff" :shadow="true" backgroundColor="#00aaff" shape="round"
									size="sm" padding="0rpx 10rpx" width="100rpx" shadow fontBold @click="edit(item)">
									<text>修改</text>
								</tn-button>
								<tn-button fontColor="#ffffff" :shadow="true" backgroundColor="#ff5500" shape="round"
									size="sm" padding="0rpx 10rpx" width="100rpx" shadow fontBold @click="del(item.id)">
									<text>删除</text>
								</tn-button>
							</view>
						</view>
					</tn-list-cell>
				</view>
			</scroll-view>
		</tn-popup>
		
		
		
		
		
	</view>
</template>

<script>
	import updateCustomBarInfo from '@/tuniao-ui/libs/function/updateCustomBarInfo.js'
	export default {

		name: 'templateShopClassify',
		data() {
			return {
				sonitem_title:'',
				sonitem:[],
				fenleishow:false,
				sonxiushow:false,
				catename:'',
				cate_son:[],
				
				keyword: '',
				// 侧边栏分类数据
				tabbar: [],
				// 分类里面的内容信息
				classifyContent: {
					// 推荐商品
					recommendProduct: [],
					// 子栏目
					subClassifyTabbar: [],
					// 显示子栏目分类选项
					showSubClassifyTabbar: false,
					// 每个子栏目下的内容
					subClassify: [{
							title: '推荐分类',
							classify: [

							]
						}

					]
				},
				// 分类菜单item的信息
				tabbarItemInfo: [],
				// scrollView的top值
				scrollViewBasicTop: 0,
				// scrollView的高度
				scrollViewHeight: 0,
				// 左边scrollView的滚动高度
				leftScrollViewTop: 0,
				// 右边scrollView的滚动高度
				rightScrollViewTop: 0,
				// 当前选中的tabbar序号
				currentTabbarIndex: 0,
				//vuex_custom_bar_height: 0,
				list: [],
			}
		},
		computed: {
			tabbarItemClass() {
				return index => {
					if (index === this.currentTabbarIndex) {
						return 'tn-classify__tabbar__item--active tn-bg-white'
					} else {
						let clazz = 'tn-bg-gray--light'
						if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
							clazz += ' tn-classify__tabbar__item--active--prev'
						}
						if (this.currentTabbarIndex < this.tabbar.length && index === this.currentTabbarIndex + 1) {
							clazz += ' tn-classify__tabbar__item--active--next'
						}
						return clazz
					}
				}
			}
		},
		onShow() {
			updateCustomBarInfo().then((res) => {
				console.log(res.statusBarHeight)
			//	this.vuex_custom_bar_height = res.statusBarHeight
			})
		},
		onReady() {
			this.$nextTick(() => {
				this.getScrollViewInfo()
				this.getTabbarItemRect()
			})
		},
		onLoad() {
			let that = this
			uni.$on('chanpincaozuo', function() {
				that._request();
			});
			uni.$on('fenlei', function() {
				that.get_groupList();
			});
			uni.$on('shopok', function() {
				that.get_groupList();
			});
			

			this.get_groupList();
		},
		onReachBottom() {
			this.page += 1;
			console.log('页面到底了' + this.page);
		},
		methods: {
			async edit_status(id, index,status){
				const that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/edit_status',
					data: {					
						id: id,
						status:status
					}
				});		
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
					that.list[index].status = status
					that.msg(result.data.msg);
					} 
				} 
			},
			
			pull(id, index) {
				const that = this;
				uni.showModal({
					title: '确定下架？',
					success(res) {
						if (res.confirm == true) {
							that.edit_status(id, index,0)						
						}
					}
				});
			},
			async delgoods(id, index) {
				const that = this;
				uni.showModal({
					title: '确定删除？',
					success(res) {
						if (res.confirm == true) {
							
							that.$request({
								loading: 0,
								method: 'post',
								url: '/chat/partner/del_good',
								data: {					
									id: id,
									status:status
								}
							});		
							that.list.splice(index, 1);
							that.msg('删除成功');
						
						}
					}
				});
			},
			push(id, index) {
				const that = this;
				uni.showModal({
					title: '确定上架？',
					success(res) {
						if (res.confirm == true) {
							that.edit_status(id, index,1)		
						}
					}
				});
			},
			jump_edit(id) {
				uni.navigateTo({
					url: '/shopPages/biz/edit_goods?id=' + id
				});
			},
			add() {
				uni.navigateTo({
					url: '/shopPages/biz/add_goods'
				});
			},
			
			
			async addcate() {
				let that = this;
				if (!that.catename) {
					this.msg('请输入名称')
					return
				}
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/addCateSon',
					data: {					
						title: this.catename
					}
				});
			
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.catename = ''
						this.get_groupList()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			
			
			},
			edit(item) {
				this.sonxiushow = true
				this.sonitem = item
				this.sonitem_title=item.title
			},
			
			async xiugaison(id) {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/editCateSon',
					data: {
						id: this.sonitem.id,
						title: this.sonitem_title,
						sort: this.sonitem.sort,
					}
				});
			
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.msg('修改成功')
						this.sonitem_title=''
						this.sonxiushow = false
						this.get_groupList()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},
			closedPopup() {
			
			},
			async del(id) {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/Category/delCateSon',
					data: {
						id: id,
					}
				});
			
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.msg('删除成功')
						this.info()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			
			
			},
			
			fenlei() {
				uni.navigateTo({
					url: '/pages/edit/product/addgroup/addgroup'
				});
			},

async _request() {
	
	let that = this
	let result = await that.$request({
		loading: 0,
		method: 'post',
		url: '/chat/partner/biz_goods',
		data: {
			class_id:this.tabbar[this.currentTabbarIndex].id
		}
	});
	if (result.statusCode == 200) {
		if (result.data.code == 200) {
		this.list = result.data.data;
	}
	}	
	
			
},
			
			
			
	async get_groupList() {
				let that = this
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/class',
					data: {
						
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
					this.tabbar = result.data.data;
					this.cate_son= result.data.data;
					this._request();	
				}
				}		

				
				
				
			

			},
			sousuo() {

				this.$http('/chat/partner/goods_new?type=goodList', {
					keyword: this.keyword
				}).then(res => {
					this.list = res;
				});
			},
			
			// 获取scrollView的高度信息
			getScrollViewInfo() {
				// 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
				this._tGetRect('.tn-classify__search--wrap').then((rect) => {
					// 如果获取失败重新获取
					if (!rect) {
						setTimeout(() => {
							this.getScrollViewInfo()
						}, 10)
						return
					}
					// 获取当前屏幕的可用高度
					const systemInfo = uni.getSystemInfoSync()
					this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10)
					this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom -
						uni.upx2px(10)
				})
			},
			// 获取分类菜单每个item的信息
			getTabbarItemRect() {
				let view = uni.createSelectorQuery().in(this)
				for (let i = 0; i < this.tabbar.length; i++) {
					view.select('#tabbar_item_' + i).boundingClientRect()
				}
				view.exec(res => {
					if (!res.length) {
						setTimeout(() => {
							this.getTabbarItemRect()
						}, 10)
						return
					}

					// 将每个分类item的相关信息
					res.map((item) => {
						this.tabbarItemInfo.push({
							top: item.top,
							height: item.height
						})
					})
				})
			},
			// 点击了分类导航
			clickClassifyNav(index) {
				if (this.currentTabbarIndex === index) {
					return
				}
				this.currentTabbarIndex = index

				this.handleLeftScrollView(index)
				this.switchClassifyContent()
				this._request()
			},
			// 点击分类后，处理scrollView滚动到居中位置
			handleLeftScrollView(index) {
				const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
				if (tabbarItemTop > this.scrollViewHeight / 2) {
					this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index]
						.height
				} else {
					this.leftScrollViewTop = 0
				}
			},
			// 切换对应分类的数据
			switchClassifyContent() {
				this.rightScrollViewTop = 1
				this.$nextTick(() => {
					this.rightScrollViewTop = 0
				})
				this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex].name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-classify {

		/* 搜索栏 start */
		&__search {
			&--wrap {
				height: 126rpx;
			}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 26rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {
			padding-top: 10rpx;
		}

		&__left-box {}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				height: 90rpx;

				&:first-child {
					border-top-right-radius: 0rpx;
				}

				&:last-child {
					border-bottom-right-radius: 0rpx;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					font-weight: bold;

					&::before {
						content: '';
						position: absolute;
						width: 12rpx;
						height: 40rpx;
						top: 50%;
						left: 0;
						background-color: $tn-main-color;
						border-radius: 12rpx;
						transform: translateY(-50%) translateX(-50%);
					}

					&--prev {
						border-bottom-right-radius: 26rpx;
					}

					&--next {
						border-top-right-radius: 26rpx;
					}
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			margin: 18rpx;

			/* 推荐商品 start */
			&__recomm {
				margin-bottom: 40rpx;

				&__swiper {}
			}

			/* 推荐商品 end */

			/* 子栏目 start */
			&__sub-classify {
				margin-bottom: 20rpx;

				&--title {
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				&__content {

					&__item {
						width: 33%;
					}

					&__image {
						background-color: rgba(188, 188, 188, 0.1);
						border-radius: 12rpx;
						margin: 10rpx;
						margin-left: 0;
						width: 100%;
						height: 160rpx;
						overflow: hidden;
						border: 1rpx solid rgba(0, 0, 0, 0.02);

						image {
							width: 100%;
							height: 160rpx;
						}
					}

					&__title {
						margin-right: 10rpx;
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
	}

	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* 导航栏 end */

		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			padding: 0 16rpx;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 36rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;

			&:first-child {
				margin-top: 40rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			/* 头部 start */
			&__head {

				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			/* 头部 end */

			/* 内容 start */
			&__content {

				margin-top: 20rpx;

				&__image {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}

				&__title {
					padding-right: 40rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&__info {

					&__price {
						&--unit {
							font-size: 20rpx;
						}

						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}

						&__value--decimal {
							font-size: 20rpx;
						}
					}

					&__count {
						color: #AAAAAA;
						font-size: 24rpx;
					}
				}
			}

			/* 内容 end */

			/* 操作按钮 start */
			&__operation {
				margin-top: 30rpx;

				&__right {
					&__button {
						margin-left: 10rpx;
					}
				}
			}

			/* 操作按钮 end */
		}

		/* 订单内容 end */
	}
</style>